<template>
  <div>
    <!--Stats cards-->
    <div class="row">
      <div class="col-md-6 col-xl-3" v-for="stats in statsCards" :key="stats.title">
        <stats-card>
          <div class="icon-big text-center" :class="`icon-${stats.type}`" slot="header">
            <i :class="stats.icon"></i>
          </div>
          <div class="numbers" slot="content">
            <p>{{ stats.title }}</p>
            {{ stats.value }}
          </div>
          <div class="stats" slot="footer">
            <i :class="stats.footerIcon"></i> {{ stats.footerText }}
          </div>
        </stats-card>
      </div>
    </div>

    <!--Charts-->
    <div class="row">
      <div class="col-12">
        <chart-card title="在线用户提交数据" sub-title="24 Hours performance" :chart-data="usersChart.data"
          :chart-options="usersChart.options">
          <span slot="footer">
            <i class="ti-reload"></i> Updated {{ 3 }} minutes ago
          </span>
          <div slot="legend">
            <i class="fa fa-circle text-info"></i> 运动
            <i class="fa fa-circle text-danger"></i> 心情
            <i class="fa fa-circle text-warning"></i> 体检
          </div>
        </chart-card>
      </div>

      <div class="col-md-6 col-12">
        <chart-card title="危险-亚健康-健康" sub-title="24 Hours performance" :chart-data="preferencesChart.data"
          chart-type="Pie">
          <span slot="footer">
            <i class="ti-timer"></i> Updated {{ 1 }} day ago</span>
          <div slot="legend">
            <i class="fa fa-circle text-info">健康</i> 
            <i class="fa fa-circle text-danger">危险</i> 
            <i class="fa fa-circle text-warning" >亚健康</i>
          </div>
        </chart-card>
      </div>

      <div class="col-md-6 col-12">
        <chart-card title="模型排队平均时长" sub-title="24 Hours performance" :chart-data="activityChart.data"
          :chart-options="activityChart.options">
          <span slot="footer">
            <i class="ti-check">运动模型几乎没有排队情况，心情模型几乎没有排队情况</i> 
          </span>
          <div slot="legend">
            <i class="fa fa-circle text-info">运动模型/ms</i> 
            <i class="fa fa-circle text-warning">心情模型/ms</i> 
          </div>
        </chart-card>
      </div>
    </div>
  </div>
</template>
<script>
import { StatsCard, ChartCard } from "@/components/index";
import Chartist from "chartist";
import axios from 'axios';
export default {
  components: {
    StatsCard,
    ChartCard,
  },
  /**
   * Chart data used to render stats, charts. Should be replaced with server data
   */
  data() {
    return {
      polling:null,
      statsCards: [
        {
          type: "warning",
          icon: "ti-server",
          title: "数据文件",
          value: "--",
          footerText: "刷新",
          footerIcon: "ti-reload",
          set(value){
            return this.value=value
          }
        },
        {
          type: "success",
          icon: "ti-android",
          title: "在线人数",
          value: "--",
          footerText: "刷新",
          footerIcon: "ti-reload",
          set(value){
            return this.value=value
          }
        },
        {
          type: "danger",
          icon: "ti-pulse",
          title: "危险报警",
          value: "--",
          footerText: "一键通话",
          footerIcon: "ti-timer",
          set(value){
            return this.value=value
          }
        },
        {
          type: "info",
          icon: "ti-dashboard",
          title: "模型排队",
          value: "--",
          footerText: "刷新",
          footerIcon: "ti-reload",
          set(value){
            return this.value=value
          }
        },
      ],
      usersChart: {
        data: {
          labels: [
            "9:00AM",
            "12:00AM",
            "3:00PM",
            "6:00PM",
            "9:00PM",
            "12:00PM",
            "3:00AM",
            "6:00AM",
          ],
          series: [
            [287, 385, 490, 562, 594, 626, 698, 895, 952],
            [67, 152, 193, 240, 387, 435, 535, 642, 744],
            [23, 113, 67, 108, 190, 239, 307, 410, 410],
          ],
        },
        options: {
          low: 0,
          high: 1000,
          showArea: true,
          height: "245px",
          axisX: {
            showGrid: false,
          },
          lineSmooth: Chartist.Interpolation.simple({
            divisor: 3,
          }),
          showLine: true,
          showPoint: false,
        },
      },
      activityChart: {
        data: {
          labels: [
            "02am",
            "04am",
            "06am",
            "08am",
            "10am",
            "12pm",
            "14pm",
            "16pm",
            "18pm",
            "20pm",
            "22pm",
            "00am",
          ],
          series: [
            [895, 680, 653, 753, 326, 434, 568, 610, 756, 542, 543, 520],
            [795, 380, 480, 503, 553, 600, 664, 698, 710, 736, 230, 293],
          ],
        },
        options: {
          seriesBarDistance: 10,
          axisX: {
            showGrid: false,
          },
          height: "245px",
        },
      },
      preferencesChart: {
        data: {
          labels: ["62%", "32%", "6%"],
          series: [62, 32, 6],
        },
        options: {},
      },
    };
  },
  methods: {
    postData(url, data) {
      return new Promise(() => {
        axios
          .post(url, data)
          .then(response => {
            console.log(sessionStorage.getItem("logStatu"))
            if (sessionStorage.getItem("logStatu") == "OK") {
              this.statsCards[0].set( response.data.fileSize + "GB - " + response.data.fileNum) 
              this.statsCards[1].set(response.data.onlineNum)
              this.statsCards[2].set( response.data.dangerWarn)
              this.statsCards[3].set(response.data.modelWait)
        
              console.log(this.$data.statsCards[3].value)
            }
          })
          .catch(error => {
            console.log(error)
          });
      });
    },
    pollData() {
      this.polling=setInterval(() => {
          this.postData("http://47.110.236.194:3000/upd",{})
      }, 8000)
    }
  },
  created(){
    //** this.polling = setInterval(this.pollData, 6000)*/ 
    this.pollData()
  },
  beforeDestroy() {
    clearInterval(this.polling);
  }
};
</script>
<style></style>
